.baseInfo {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .baseInfo-top,
    .baseInfo-bottom {
        @include flex-between;
    }

    .baseInfo-top {
        height: 33%;
        margin-bottom: 20px;

        .top-left {
            width: 35%;
            @include flex-around;

            .userImg {
                font-size: 100px;
                color: $theme-color;
            }

            .userPic{
                width: 95px;
                height: 95px;
                border-radius: 50%;
            }

            .des {
                color: $des-color;
                
            }
        }

        .top-right {
            width: 65%;

            .info {
                @include flex-around;
                margin-bottom: 10px;

                p {
                    color: $des-color;
                    line-height: 35px;
                    .des{
                        display: inline-block;
                        width: 80px;
                    }
                    .black{
                        color: #000;
                    }
                }
            }

            .buttons {
                width: 100%;

                .buttons-contain {
                    @include marginCenter(80%);
                    @include flex-between;
                    button{
                        width: 100px;
                    }
                }

                text-align: center;
            }
        }
    }

    .baseInfo-bottom {
        height: 62%;

        .bottom-left,
        .bottom-right {
            border: 1px solid $border-color;
            font-size: 15px;

            .title {
                @include flex-between;
                padding: 8px 10px;
                height: 13%;
                background-color: #eee;
                color: #000;

                .right:hover {
                    color: $theme-color;
                    cursor: pointer;
                }
            }
        }

        .bottom-left {
            width: 60%;
            height: 100%;

            .content {
                height: 87%;
                display: flex;
                flex-direction: column;
                margin-top: 8px;
                font-size: 15px;
                .items {
                    text-align: left;
                    height: 30%;
                    display: flex;
                    margin-bottom: 10px;
                    align-items: center;
                    margin-left: 50px;
                    .content-des {

                        p {
                            line-height: 25px;
                        }
                        .totle{
                            .num{
                                color: $theme-color;
                                font-size: 17px;
                                font-weight: bold;
                            }
                        }
                        .des {
                            color: $des-color;
                            cursor: pointer;
                            &:hover {
                                color: $theme-color;
                            }
                        }
                    }
                }
            }
        }

        .bottom-right {
            width: 36%;
            height: 100%;

            .content {
                margin-top: 8px;
                font-size: 15px;
                
                p {
                    font-size: 15px;
                    display: flex;
                    align-items: center;
                    .theme{
                        color: $theme-color;
                        margin-left: 15px;
                        margin-right: 8px;
                        font-size: 25px;
                    }
                }
            }
        }
    }
}